<template>
  <el-dialog
    v-model="state.visible"
    :title="state.title"
    width="1400px"
    draggable
    :close-on-click-modal="false"
    @close="handleClose"
    class="approval-dialog"
  >
    <div class="approval-content">
      <!-- 申请信息展示 -->
      <div class="approval-info-section">
        <div class="info-header">
          <span class="info-title">
            <el-icon><DocumentCopy /></el-icon>
            申请信息
          </span>
          <el-tag :type="state.approvalData?.flowType === '入库' ? 'success' : 'warning'" size="large">
            {{ state.approvalData?.flowType }}申请
          </el-tag>
        </div>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">申请号</span>
            <span class="info-value">{{ state.approvalData?.requestNo }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">申请人</span>
            <span class="info-value">{{ state.approvalData?.applicantName }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">申请部门</span>
            <span class="info-value">{{ state.approvalData?.applicantDept }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">物资名称</span>
            <span class="info-value">{{ state.approvalData?.materialName }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">申请数量</span>
            <span class="info-value highlight">{{ state.approvalData?.quantity }} {{ state.approvalData?.unit }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">申请金额</span>
            <span class="info-value amount">￥{{ state.approvalData?.materialPriceTotal?.toFixed(2) || '0.00' }}</span>
          </div>
        </div>
      </div>

      <!-- 预算情况展示 - 仅出库申请显示 -->
      <div class="budget-info-section" v-if="state.budgetInfo && state.approvalData?.flowType === '出库'">
        <div class="budget-header">
          <span class="budget-title">
            <el-icon><Money /></el-icon>
            预算情况
          </span>
          <el-tag type="info" size="small">{{ state.budgetInfo.orgName }}</el-tag>
        </div>
        <div class="budget-content">
          <div class="budget-stats">
            <div class="budget-item">
              <span class="budget-label">预算余额</span>
              <span class="budget-value remaining">¥{{ formatCurrency(state.budgetInfo.remainingAmount) }}</span>
            </div>
            <div class="budget-item">
              <span class="budget-label">本次申请</span>
              <span class="budget-value request">¥{{ formatCurrency(state.approvalData?.materialPriceTotal || 0) }}</span>
            </div>
            <div class="budget-item">
              <span class="budget-label">批准后余额</span>
              <span class="budget-value after">¥{{ formatCurrency(state.budgetInfo.remainingAmount - (state.approvalData?.materialPriceTotal || 0)) }}</span>
            </div>
          </div>
          <el-progress 
            :percentage="((state.budgetInfo.totalAmount - state.budgetInfo.remainingAmount) / state.budgetInfo.totalAmount * 100)"
            :color="getBudgetProgressColor(state.budgetInfo.usageRate)"
            :stroke-width="8"
            class="budget-progress"
          />
        </div>
      </div>

      <!-- 预算加载状态 - 仅出库申请显示 -->
      <el-card shadow="never" class="mb-4" v-else-if="state.budgetLoading && state.approvalData?.flowType === '出库'">
        <div class="budget-loading">
          <el-icon class="is-loading"><Loading /></el-icon>
          <span>正在加载预算信息...</span>
        </div>
      </el-card>

      <!-- 无预算配置提示 - 仅出库申请显示 -->
      <el-card shadow="never" class="mb-4" v-else-if="state.showNoBudgetTip && state.approvalData?.flowType === '出库'">
        <template #header>
          <div class="card-header">
            <span class="header-title">💡 预算提示</span>
          </div>
        </template>
        <div class="no-budget-tip">
          <el-alert
            title="该区域暂未配置预算"
            :description="`${state.approvalData?.applicantDept} 区域目前没有设置预算额度，无法显示预算使用情况。`"
            type="info"
            :closable="false"
            show-icon>
          </el-alert>
        </div>
      </el-card>

      <!-- 审批表单 -->
      <div class="approval-form-section">
        <div class="form-header">
          <span class="form-title">
            <el-icon><Edit /></el-icon>
            审批操作
          </span>
          <el-tag :type="state.action === 'approve' ? 'success' : 'danger'" size="large">
            {{ state.action === 'approve' ? '同意审批' : '拒绝审批' }}
          </el-tag>
        </div>
        <div class="form-content">
          <!-- 批准数量设置（仅同意操作显示） -->
          <div class="form-group" v-if="state.action === 'approve'">
            <label class="form-label">批准数量</label>
            <div class="quantity-setting">
              <el-input-number
                v-model="state.form.approvedQuantity"
                :min="1"
                :max="state.approvalData?.quantity || 999999"
                :precision="0"
                placeholder="请输入批准数量"
                style="width: 200px"
              />
              <span class="unit-text">{{ state.approvalData?.unit }}</span>
              <span class="quantity-note">
                (最大: {{ state.approvalData?.quantity }} {{ state.approvalData?.unit }})
              </span>
            </div>
          </div>

          <!-- 确认人设置（仅同意操作显示） -->
          <div class="form-group" v-if="state.action === 'approve'">
            <label class="form-label">确认人设置</label>
            <div class="confirmer-setting">
              <el-select
                v-model="state.form.confirmerId"
                placeholder="选择确认人"
                filterable
                clearable
                style="width: 240px"
                :disabled="state.form.confirmerLocked"
                @change="handleConfirmerChange"
              >
                <el-option
                  v-for="user in userOptions"
                  :key="user.id"
                  :label="user.realName"
                  :value="user.id"
                >
                  <div class="user-option">
                    <span class="user-name">{{ user.realName }}</span>
                    <span class="user-org">{{ user.orgName }}</span>
                    <span class="user-pos" v-if="user.posName">{{ user.posName }}</span>
                  </div>
                </el-option>
              </el-select>
              <el-button 
                :icon="state.form.confirmerLocked ? Lock : Unlock" 
                @click="toggleConfirmerLock"
                :type="state.form.confirmerLocked ? 'danger' : 'success'"
                size="default"
                :disabled="executionStage"
              >
                {{ state.form.confirmerLocked ? '解锁' : '锁定' }}
              </el-button>
            </div>
            <div class="form-note" v-if="state.form.confirmerLocked">
              <el-icon><InfoFilled /></el-icon>
              <span>确认人已锁定，将使用直属主管作为确认人</span>
            </div>
            <div class="form-note" v-else-if="executionStage">
              <el-icon><InfoFilled /></el-icon>
              <span>当前处于发放阶段，将默认使用当前操作人作为确认人</span>
            </div>
          </div>

          <!-- 审批意见 -->
          <div class="form-group">
            <label class="form-label">审批意见</label>
            <el-input
              v-model="state.form.remark"
              type="textarea"
              :rows="3"
              :placeholder="state.action === 'approve' ? '请输入同意理由(可选)' : '请输入拒绝原因'"
              maxlength="500"
              show-word-limit
              resize="none"
            />
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="approval-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button
          type="primary"
          :color="state.action === 'approve' ? '#67c23a' : '#f56c6c'"
          @click="handleSubmit"
          :loading="state.loading"
        >
          <el-icon>
            <Check v-if="state.action === 'approve'" />
            <Close v-else />
          </el-icon>
          确认{{ state.action === 'approve' ? '同意' : '拒绝' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
// cspell:ignore confirmer Confirmer
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Check, Close, InfoFilled, Loading, Lock, Unlock, DocumentCopy, Money, Edit } from '@element-plus/icons-vue';
// 移除表单相关类型，使用自定义验证
import { getAPI } from '/@/utils/axios-utils';
import { SysUserApi } from '/@/api-services/api';
import { useUserInfo } from '/@/stores/userInfo';
import { useStoreBudgetConfigApi } from '/@/api/store/storeBudgetConfig';

interface User {
  id: number;
  realName: string;
  orgName?: string;
  posName?: string;
}

interface ApprovalData {
  id: number;
  flowType: string;
  requestNo: string;
  applicantName: string;
  applicantDept: string;
  storeTypeDisplayName: string;
  materialName: string;
  quantity: number;
  unit: string;
  requestTime: string;
  expectedDate: string;
  currentStep: number;
  totalSteps: number;
  orgId?: number;
  materialPriceTotal?: number;
  stageRequiresConfirmer?: boolean;
  isExecutionStage?: boolean;
  canAdminDirectApprove?: boolean;
  nextApprovalAction?: number;
  [key: string]: any;
}

interface ApprovalForm {
  approvedQuantity: number;
  confirmerId: number | null;
  confirmerName: string;
  remark: string;
  confirmerLocked: boolean;
}

interface BudgetInfo {
  totalAmount: number;
  usedAmount: number;
  pendingAmount: number;
  remainingAmount: number;
  usageRate: number;
  orgName: string;
}

const emit = defineEmits<{
  'submit': [data: {
    action: 'approve' | 'reject';
    approvedQuantity?: number;
    confirmerId?: number;
    confirmerName?: string;
    remark: string;
    originalData: ApprovalData;
  }];
}>();

// 移除表单引用，使用自定义验证
const userOptions = ref<User[]>([]);
const userInfo = useUserInfo();
const storeBudgetConfigApi = useStoreBudgetConfigApi();

const toNumberOrNull = (value: unknown): number | null => {
  const num = Number(value);
  return Number.isFinite(num) ? num : null;
};

const toNumberOrUndefined = (value: unknown): number | undefined => {
  const num = Number(value);
  return Number.isFinite(num) ? num : undefined;
};

const state = reactive({
  visible: false,
  loading: false,
  title: '',
  action: 'approve' as 'approve' | 'reject',
  approvalData: null as ApprovalData | null,
  form: {
    approvedQuantity: 0,
    confirmerId: null,
    confirmerName: '',
    remark: '',
    confirmerLocked: true,
  } as ApprovalForm,
  budgetInfo: null as BudgetInfo | null,
  budgetLoading: false,
  showNoBudgetTip: false,
});

// 移除表单验证规则，使用自定义验证

// 页面加载时获取用户列表
onMounted(async () => {
  await loadUserOptions();
});

// 加载用户选项
const loadUserOptions = async () => {
  try {
    const params = {
      page: 1,
      pageSize: 100,
      status: 1, // 只获取启用的用户
    };
    const result = await getAPI(SysUserApi).apiSysUserPagePost(params);
    userOptions.value = (result.data.result?.items || []).map((user: any) => ({
      id: user.id || 0,
      realName: user.realName || '',
      orgName: user.orgName || '',
      posName: user.posName || '',
    }));
  } catch (error) {
    console.error('加载用户列表失败:', error);
    ElMessage.error('加载用户列表失败');
  }
};

// 处理确认人变化
const handleConfirmerChange = (userId: number | null) => {
  if (userId) {
    const selectedUser = userOptions.value.find(user => user.id === userId);
    if (selectedUser) {
      state.form.confirmerId = userId;
      state.form.confirmerName = selectedUser.realName;
    }
  } else {
    state.form.confirmerId = null;
    state.form.confirmerName = '';
  }
};

// 切换确认人锁定状态
const isExecutionStage = (data: ApprovalData | null) => {
  if (!data) return false;
  if (typeof data.isExecutionStage === 'boolean') {
    return data.isExecutionStage;
  }
  const currentStep = Number(data.currentStep ?? 1);
  if (data.flowType === '入库') {
    return currentStep >= 2;
  }
  if (data.flowType === '出库') {
    return currentStep >= 3;
  }
  return false;
};

const executionStage = computed(() => isExecutionStage(state.approvalData));

const toggleConfirmerLock = () => {
  if (executionStage.value) {
    return;
  }
  state.form.confirmerLocked = !state.form.confirmerLocked;
  if (state.form.confirmerLocked) {
    // 锁定时清空选择
    state.form.confirmerId = null;
    state.form.confirmerName = '';
  }
};

// 格式化货币显示
const formatCurrency = (amount: number) => {
  if (amount >= 10000) {
    return (amount / 10000).toFixed(1) + '万';
  }
  return amount.toLocaleString();
};

// 获取预算进度条颜色
const getBudgetProgressColor = (usageRate: number) => {
  if (usageRate >= 90) return '#f56c6c'; // 红色 - 危险
  if (usageRate >= 70) return '#e6a23c'; // 橙色 - 警告
  return '#67c23a'; // 绿色 - 正常
};

// 加载预算信息
const loadBudgetInfo = async (orgId: number) => {
  if (!orgId) return;
  
  try {
    state.budgetLoading = true;
    
    // 使用看板数据API并筛选指定组织的预算
    const dashboardResult = await storeBudgetConfigApi.getDashboardData();
    
    if (dashboardResult.data?.result?.budgetDetails) {
      const allBudgets = dashboardResult.data.result.budgetDetails;
      
      // 先查找当前组织的预算
      let budgetData = allBudgets.find((budget: any) => budget.orgsId === orgId || budget.OrgsId === orgId);
      
      // 如果没找到，尝试查找父级组织的预算（基于组织名称匹配逻辑）
      if (!budgetData && state.approvalData?.applicantDept) {
        const deptName = state.approvalData.applicantDept;
        
        // 针对"沪南"这个特殊情况，直接映射到"曲面组立作业区"
        if (deptName === '沪南') {
          budgetData = allBudgets.find((budget: any) => 
            (budget.orgName && budget.orgName.includes('曲面组立')) ||
            (budget.OrgName && budget.OrgName.includes('曲面组立'))
          );
        }
        
        // 如果还是没找到，尝试更广泛的匹配
        if (!budgetData) {
          budgetData = allBudgets.find((budget: any) => {
            const orgName = budget.orgName || budget.OrgName || '';
            return orgName && (
              orgName.includes('曲面组立') || 
              orgName.includes('作业区') ||
              deptName.includes(orgName) ||
              orgName.includes(deptName)
            );
          });
        }
      }
      
      if (budgetData) {
        // 兼容大小写字段名
        const totalAmount = budgetData.totalAmount || budgetData.TotalAmount || 0;
        const usedAmount = budgetData.usedAmount || budgetData.UsedAmount || 0;
        const pendingAmount = budgetData.pendingAmount || budgetData.PendingAmount || 0;
        const orgName = budgetData.orgName || budgetData.OrgName || state.approvalData?.applicantDept || '未知区域';
        
        const totalUsed = usedAmount + pendingAmount;
        const usageRate = totalAmount > 0 ? (totalUsed / totalAmount * 100) : 0;
        
        state.budgetInfo = {
          totalAmount: totalAmount,
          usedAmount: usedAmount,
          pendingAmount: pendingAmount,
          remainingAmount: totalAmount - totalUsed,
          usageRate: usageRate,
          orgName: orgName
        };
      } else {
        // 显示无预算配置提示
        state.showNoBudgetTip = true;
      }
    } else {
      // 显示无预算配置提示
      state.showNoBudgetTip = true;
    }
    
  } catch (error) {
    console.error('加载预算信息失败:', error);
    state.showNoBudgetTip = true;
  } finally {
    state.budgetLoading = false;
  }
};

// 打开审批弹窗
const openDialog = (approvalData: ApprovalData, action: 'approve' | 'reject') => {
  // 确保审批数据存在和完整
  if (!approvalData || !approvalData.id) {
    ElMessage.error('审批数据不完整，请重新选择');
    return;
  }
  
  state.approvalData = { ...approvalData }; // 创建副本避免引用问题
  state.action = action;
  state.title = `${action === 'approve' ? '同意' : '拒绝'}审批 - ${approvalData.requestNo}`;
  
  // 重置表单和预算信息
  state.form = {
    approvedQuantity: approvalData.quantity || 0,
    confirmerId: null,
    confirmerName: '',
    remark: action === 'approve' ? '同意' : '拒绝',
    confirmerLocked: true,
  };

  if (action === 'approve' && isExecutionStage(approvalData)) {
    state.form.confirmerLocked = false;
    const currentUserId = toNumberOrNull(userInfo.userInfos?.id);
    state.form.confirmerId = currentUserId;
    state.form.confirmerName = currentUserId !== null ? userInfo.userInfos?.realName ?? '' : '';
  }
  
  state.budgetInfo = null;
  state.showNoBudgetTip = false;
  
  state.visible = true;
  
  // 仅为出库申请加载预算信息
  const orgId = approvalData.orgId || approvalData.OrgId;
  
  if (orgId && approvalData.flowType === '出库') {
    loadBudgetInfo(orgId);
  }
};

// 关闭弹窗
const handleClose = () => {
  state.visible = false;
  state.loading = false;
  state.budgetInfo = null;
  state.budgetLoading = false;
  state.showNoBudgetTip = false;
};

// 提交审批
const handleSubmit = async () => {
  try {
    // 简单验证
    if (state.action === 'approve' && (!state.form.approvedQuantity || state.form.approvedQuantity <= 0)) {
      ElMessage.error('请输入有效的批准数量');
      return;
    }
    
    if (state.action === 'reject' && !state.form.remark.trim()) {
      ElMessage.error('拒绝时必须填写原因');
      return;
    }
    
    // 检查审批阶段是否必须指定确认人
    const executionStageValue = executionStage.value;
    const requiresConfirmer = state.approvalData?.stageRequiresConfirmer ?? (state.approvalData ? Number(state.approvalData.currentStep ?? 1) >= 2 : false);
    if (state.action === 'approve' && requiresConfirmer && !executionStageValue) {
      // 对于审批阶段，必须指定确认人
      const hasConfirmer = state.form.confirmerLocked ? 
        (userInfo.userInfos?.managerUserId) : 
        (state.form.confirmerId && state.form.confirmerId > 0);
        
      if (!hasConfirmer) {
        ElMessage.error('审批阶段必须指定确认人，请选择确认人或使用直属主管');
        return;
      }
    }
    
    state.loading = true;
    
    const submitData: any = {
      action: state.action,
      remark: state.form.remark,
    };
    
    if (state.action === 'approve') {
      submitData.approvedQuantity = state.form.approvedQuantity;
      
      if (executionStageValue) {
        const currentUserId = toNumberOrNull(userInfo.userInfos?.id);
        submitData.confirmerId = currentUserId;
        submitData.confirmerName = currentUserId !== null ? userInfo.userInfos?.realName ?? '' : '';
      } else if (state.form.confirmerLocked || !state.form.confirmerId) {
        // 如果确认人锁定或未选择，使用直属主管
        const managerId = toNumberOrUndefined(userInfo.userInfos?.managerUserId);
        if (managerId !== undefined) {
          const managerUser = userOptions.value.find(user => user.id === managerId);
          if (managerUser) {
            submitData.confirmerId = managerUser.id;
            submitData.confirmerName = managerUser.realName;
          }
        }
      } else {
        submitData.confirmerId = state.form.confirmerId;
        submitData.confirmerName = state.form.confirmerName;
      }
    }
    
    // 添加原始数据到提交数据中
    if (!state.approvalData) {
      ElMessage.error('审批数据异常，请重新打开审批弹窗');
      state.loading = false;
      return;
    }
    
    submitData.originalData = state.approvalData;
    
    emit('submit', submitData);
    handleClose();
    
  } catch (error) {
    console.error('表单验证失败:', error);
    state.loading = false;
  }
};

// 暴露方法
defineExpose({
  openDialog,
});
</script>

<style lang="scss" scoped>
/* 弹窗整体样式 */
:deep(.approval-dialog) {
  .el-dialog__header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px 8px 0 0;
    padding: 20px 24px;
  }
  
  .el-dialog__title {
    color: white;
    font-weight: 600;
    font-size: 16px;
  }
  
  .el-dialog__body {
    padding: 24px;
  }
}

.approval-content {
  .mb-4 {
    margin-bottom: 20px;
  }
}

/* 申请信息区域 */
.approval-info-section {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #e9ecef;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e9ecef;
}

.info-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  color: #495057;
  
  .el-icon {
    color: #6c757d;
  }
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-label {
  font-size: 12px;
  color: #6c757d;
  font-weight: 500;
}

.info-value {
  font-size: 14px;
  color: #212529;
  font-weight: 500;
  
  &.highlight {
    color: #0d6efd;
    font-weight: 600;
  }
  
  &.amount {
    color: #fd7e14;
    font-weight: 600;
    font-size: 15px;
  }
}

/* 预算信息区域 */
.budget-info-section {
  background: #fff3cd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #ffeaa7;
}

.budget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.budget-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  color: #856404;
  
  .el-icon {
    color: #f39c12;
  }
}

.budget-content {
  .budget-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 12px;
  }
  
  .budget-item {
    text-align: center;
  }
  
  .budget-label {
    display: block;
    font-size: 12px;
    color: #856404;
    margin-bottom: 4px;
  }
  
  .budget-value {
    display: block;
    font-weight: 600;
    font-size: 14px;
    
    &.remaining {
      color: #198754;
    }
    
    &.request {
      color: #fd7e14;
    }
    
    &.after {
      color: #6f42c1;
    }
  }
  
  .budget-progress {
    margin-top: 8px;
  }
}

/* 审批表单区域 */
.approval-form-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #dee2e6;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e9ecef;
}

.form-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  color: #495057;
  
  .el-icon {
    color: #6c757d;
  }
}

/* 审批表单内容区域 */
.form-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 14px;
  font-weight: 600;
  color: #495057;
  margin-bottom: 4px;
}

.quantity-setting {
  display: flex;
  align-items: center;
  gap: 12px;
  
  .unit-text {
    color: #6c757d;
    font-weight: 500;
    background: #e9ecef;
    padding: 4px 8px;
    border-radius: 4px;
  }
  
  .quantity-note {
    font-size: 12px;
    color: #6c757d;
  }
}

.confirmer-setting {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-option {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .user-name {
    font-weight: 500;
    color: #212529;
  }
  
  .user-org {
    color: #6c757d;
    font-size: 12px;
  }
  
  .user-pos {
    color: #0d6efd;
    font-size: 11px;
    background: #cfe2ff;
    padding: 2px 6px;
    border-radius: 12px;
  }
}

.form-note {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 12px;
  color: #6c757d;
  border-left: 3px solid #0d6efd;
  
  .el-icon {
    color: #0d6efd;
  }
}

.approval-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 0 0 0;
  border-top: 1px solid #dee2e6;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

:deep(.el-card__header) {
  padding: 12px 20px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-card__body) {
  padding: 20px;
}

/* 预算展示相关样式 */
.budget-progress-container {
  padding: 16px 20px;
}

.budget-summary {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
}

.budget-label {
  color: #606266;
  margin-right: 8px;
}

.budget-amount.remaining {
  font-size: 18px;
  font-weight: bold;
  color: #409eff;
  margin-right: 6px;
}

.budget-total {
  color: #909399;
  font-size: 14px;
}

.budget-progress {
  margin-bottom: 12px;
}

.current-request {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #606266;
}

.request-label {
  margin-right: 8px;
}

.request-amount {
  font-weight: bold;
  color: #e6a23c;
  margin-right: 8px;
}

.after-approval {
  color: #909399;
  font-size: 12px;
}

.budget-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #909399;
}

.budget-loading .el-icon {
  margin-right: 8px;
  font-size: 16px;
}
</style>
